import { defineComponent } from 'vue';
import GLayout from '/@/shared/components/g-layout/index.vue';
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
type TableDataType = {
  key: number;
  name: string;
  age: number;
  street: string;
  building: string;
  number: number;
  companyAddress: string;
  companyName: string;
  gender: string;
};
export default defineComponent({
  components: { GLayout, SmileOutlined, DownOutlined },
  data() {
    return {
      columns: [] as any,
      data: [] as any,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.columns = [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          width: 100,
          fixed: 'left',
          filters: [
            {
              text: 'Joe',
              value: 'Joe',
            },
            {
              text: 'John',
              value: 'John',
            },
          ],
          onFilter: (value: string, record: TableDataType) => record.name.indexOf(value) === 0,
        },
        {
          title: 'Other',
          children: [
            {
              title: 'Age',
              dataIndex: 'age',
              key: 'age',
              width: 200,
              sorter: (a: TableDataType, b: TableDataType) => a.age - b.age,
            },
            {
              title: 'Address',
              children: [
                {
                  title: 'Street',
                  dataIndex: 'street',
                  key: 'street',
                  width: 200,
                },
                {
                  title: 'Block',
                  children: [
                    {
                      title: 'Building',
                      dataIndex: 'building',
                      key: 'building',
                      width: 100,
                    },
                    {
                      title: 'Door No.',
                      dataIndex: 'number',
                      key: 'number',
                      width: 100,
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          title: 'Company',
          children: [
            {
              title: 'Company Address',
              dataIndex: 'companyAddress',
              key: 'companyAddress',
              width: 200,
            },
            {
              title: 'Company Name',
              dataIndex: 'companyName',
              key: 'companyName',
            },
          ],
        },
        {
          title: 'Gender',
          dataIndex: 'gender',
          key: 'gender',
          width: 80,
          fixed: 'right',
        },
      ];
      this.data = [...Array(100)].map((_, i) => ({
        key: i,
        name: 'John Brown',
        age: i + 1,
        street: 'Lake Park',
        building: 'C',
        number: 2035,
        companyAddress: 'Lake Street 42',
        companyName: 'SoftLake Co',
        gender: 'M',
      }));
    },
  },
});
